<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>美食推荐系统 - 注册</title>
  {% load static %}
  <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  <link href="{% static 'css/login.css' %}" rel="stylesheet"> <!-- 引入自定义 CSS -->
</head>
<body>

  <h2 class="page-title">美食推荐系统</h2>

  <div class="container">
    <h3 class="title">注册</h3>
    <form id="registerForm">
      <div class="mb-3">
        <label for="username" class="form-label">用户名</label>
        <input type="text" class="form-control" id="username" placeholder="输入您的用户名" required>
      </div>
      
      <div class="mb-3">
        <label for="email" class="form-label">邮箱</label>
        <input type="email" class="form-control" id="email" placeholder="输入您的邮箱" required>
      </div>

      <div class="mb-3">
        <label for="password" class="form-label">密码</label>
        <input type="password" class="form-control" id="password" placeholder="输入您的密码" required>
      </div>

      <div class="mb-3">
        <label for="confirmPassword" class="form-label">确认密码</label>
        <input type="password" class="form-control" id="confirmPassword" placeholder="确认您的密码" required>
      </div>

      <button type="submit" class="btn btn-primary w-100">注册</button>
    </form>

    <div class="text-center mt-3 login-link">
      <span>已经有账号？</span> <a href="{% url 'login' %}">登录</a>
    </div>
  </div>

  <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
  <script>
    const csrfToken = '{{ csrf_token }}';  // 将 CSRF 令牌存储在变量中

    document.getElementById("registerForm").addEventListener("submit", function(event) {
      event.preventDefault();

      const username = document.getElementById("username").value;
      const email = document.getElementById("email").value;
      const password = document.getElementById("password").value;
      const confirmpassword = document.getElementById("confirmPassword").value;

      // 显示加载状态
      const registerButton = event.target.querySelector('button[type="submit"]');
      registerButton.textContent = '注册中...'; // 更新按钮文本
      registerButton.disabled = true; // 禁用按钮

      fetch('/myapp/register/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': csrfToken
        },
        body: JSON.stringify({
          'username': username,
          'email': email,
          'password': password,
          'confirmpassword': confirmpassword
        })
      })
      .then(response => response.json())
      .then(data => {
        registerButton.textContent = '注册'; // 恢复按钮文本
        registerButton.disabled = false; // 启用按钮

        if (data.success) {
          alert(data.message);
          window.location.href = "/myapp/login"; // 注册成功后重定向到登录页面
        } else {
          alert(data.message);
        }
      })
      .catch(error => {
        registerButton.textContent = '注册'; // 恢复按钮文本
        registerButton.disabled = false; // 启用按钮
        alert("注册失败，请稍后重试！");
      });
    });
  </script>
</body>
</html>
